<template>
  <div class="header">
    <van-nav-bar title="文章详情" left-arrow @click-left="onClickLeft" />
  </div>
  <div class="body" id="body">
    <div class="img-title">
      <img :src="articleData.artlogo" class="lazyload image" height="233" />
      <div class="title">
        <div class="title-top">{{ articleData.arttitle }}</div>
        <div class="label-str">
          <div class="label-left">
            {{ articleData.putime }}
          </div>
          <div class="label-right">
            <van-icon name="browsing-history-o" />&nbsp;{{ articleData.click_num }}
          </div>
        </div>
      </div>
    </div>
    <!-- 正文 -->
    <div v-html="articleData.content" class="content"></div>
    <!-- 上一篇  下一篇 -->
    <div class="next-page">
      <div class="fontend" v-if="front" @click="jumpArticleDetail(front.id)">
        上一篇:{{ front.arttitle }}
      </div>
      <div class="backend" v-if="after" @click="jumpArticleDetail(after.id)">
        下一篇:{{ after.arttitle }}
      </div>
    </div>
    <!-- 评论层 -->
    <div class="comment">
      <div class="comment_title">评论区</div>
      <!-- 填写留言文本域 -->
      <div class="textarea_view" v-if="loginSign">
        <div>
          <textarea class="weui-textarea" placeholder="请输入留言" v-model="textValue" />
          <van-button type="primary" block color="#24657D" @click="putCommentExec"
            >提交</van-button
          >
        </div>
      </div>
      <div v-else class="to-login-page" @click="jumpPersonal()">去登录页</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  PropType,
  ref,
  watch,
  reactive,
  toRefs,
  provide,
  inject,
  onBeforeMount, // 在组件挂载之前执行的函数
  onMounted,
  nextTick,
} from "vue";
//导入代码高亮文件
import hljs from "highlight.js";
// 引入路由
import { useRouter, useRoute } from "vue-router";
// 引入公共js文件
import utils from "/@/assets/js/public/function";
// api 接口文件
import { getArticleDetail, getUserSession, putComment } from "/@/api/phone/index";
import { Toast } from "vant";
import { common, userinfo } from "/@/hooks/common";

// =============================================================================
// 实例化路由
const router = useRouter();
const route = useRoute();

/**
 * @name: 声明data
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
const data = reactive({
  // 文章内容
  articleData: Array<any>(["artlogo", "arttitle", "putime", "click_num", "content"]),
  // 文章标题
  articleTitle: <Number>0,
  // 点击数量
  click_num: <Number>0,
  // 发布时间
  putime: <String>"",
  // 文章id
  article_id: <Number>(route.query.article_id ? route.query.article_id : 0),
  // 来源
  path: <String>(route.query.path ? route.query.path : "index"),
  // 上一篇
  front: Array<any>(),
  // 下一篇
  after: Array<any>(),
  // 是否登录标识
  loginSign: userinfo.userid ? true : false,
  // 文本域输入值
  textValue: <String>"",
});

/**
 * @name: 将data绑定值dataRef
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-01-10
 */
const {
  articleTitle,
  click_num,
  putime,
  articleData,
  front,
  after,
  loginSign,
  textValue,
} = toRefs(data);

/**
 * @name: 监听登录状态变化
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2021-01-20
 */
watch(
  () => userinfo.userid,
  () => {
    data.loginSign = userinfo.userid ? true : false;
  }
);

// ===============================================================================
// 方法

/**
 * @name: 文章评论
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
const putCommentExec = () => {
  if (data.textValue == "") {
    Toast("请填写评论内容！");
    return;
  }
  Toast.loading({
    message: "加载中...",
    forbidClick: true,
  });
  let param = { article_id: data.article_id, content: data.textValue };
  putComment(param).then(function (response: any) {
    // console.log(response);
    data.textValue = "";
    utils.sleep(1000).then(() => {
      // 这里写sleep之后需要去做的事情
      // 回到滚动条刷新前位置
      Toast.clear();
    });
    Toast(response.msg);
  }); //*/
};

/**
 * @name: 跳个人中心页
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
const jumpPersonal = () => {
  router.push("/phone/personal");
};

/**
 * @name: 返回上一页
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
const onClickLeft = () => {
  router.push("/phone/" + data.path);
};

/**
 * @name: 跳转文章详情页
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 * @param:	category_id	number	分类
 */
const jumpArticleDetail = (article_id: Number) => {
  getArticleDetailData(utils.encryptCode({ article_id: article_id }));
};

/**
 * @name: 获取文章详情数据
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
const getArticleDetailData = (article_id: any): void => {
  try {
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
    });
    let param = { article_id: article_id };
    getArticleDetail(param).then(function (response: any) {
      data.articleData = response.detail;
      // data.articleData.content = hlCode(response.detail.content);
      data.front = response.front;
      data.after = response.after;
      // 滚动条回顶部
      let json = document.getElementById("body");
      if (json != null) {
        json.scrollTop = 0;
      }

      utils.sleep(3000).then(() => {
        // 这里写sleep之后需要去做的事情
        // 回到滚动条刷新前位置
        Toast.clear();
      });
    });
  } catch (error) {
    // console.log('chucuole');
    // 自定义loading消失
    // utils.alertLoadExec(false);
    Toast.clear();
  }
};

/**
 * @name: editor代码块标签高亮显示
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2021-01-19 21:06:22
 */
const hlCode = (content: string) => {
  //替换pre标签，前端高亮显示
  let c = document.createElement("div");
  c.innerHTML = content;
  for (let i = 0; i < c.getElementsByTagName("pre").length; i++) {
    let con = c.getElementsByTagName("pre")[i].innerHTML;
    c.getElementsByTagName("pre")[i].innerHTML =
      '<code class="hljs ini" style="word-break: break-all;">' + con + "</code>";
    hljs.highlightBlock(c.getElementsByTagName("pre")[i]); //使用插件高亮你的代码块
  }
  content = c.innerHTML;
  return content;
};

// /**
//  * @name: 显示大图
//  * @author: camellia
//  * @email: guanchao_gc@qq.com
//  * @date: 2021-03-10 22:37:32
//  * @param:	data	type	description
//  */
// const imageBoost = (str:string) => {
//     data.imgSrc = str;
//     data.showImg = true;
//     common.bigImgShow = data.showImg;
// }
// window.imageBoost = imageBoost;

/**
 * @name: 生命周期---页面挂载完成
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
const mounted = onMounted(() => {});

/**
 * @name: 获取用户登录信息
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
const getUserSessionData = (): void => {
  try {
    let param = {};
    getUserSession(param).then(function (response: any) {
      userinfo.userid = response.userid;
      userinfo.figureurl = response.figureurl;
      userinfo.nickname = response.nickname;
      userinfo.email = response.email;
      if (userinfo.userid) {
        data.loginSign = true;
      }
    });
  } catch (error) {
    console.log("登录信息出错！");
  }
};

// ===============================================================================
// 获取登录状态
getUserSessionData();
// 获取文章详情数据
getArticleDetailData(data.article_id);
</script>

<style scoped lang="scss">
@import "/@/assets/css/phone/articleDetail.scss";
</style>
